<style>
    .layout{
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
    }
    .mb20 {
        margin-bottom: 20px;
    }
    .layout-logo{
        width: 110px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 0px;
        left: 20px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .layout-footer-center{
        text-align: center;
    }
    .content{
        height: auto;
        background-color:white;
        padding-left: 30px;
        padding-right: 30px;
    }
    .items{
        height:40px;
        line-height:40px
    }
    .info{
        height: auto;
        background-color:#F8F8FF;
        padding-left: 70px;
        padding-right: 70px;
    }
    .header{
        height: 40px;
        background-color: white;
        line-height: 40px;
        border-bottom: 1px solid orangered;
    }
    .info-middle{
        height: 330px;
        background-color: #F8F8FF;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 15px;
    }
    .titles{
        height: 35px;
        background-color: black;
        line-height: 35px;
        font-size: 1rem;
        color: white;
        padding-left: 10px;
    }
    .nopadding .ivu-table-cell {
        padding: 0px 0px;
    }
    .head_btn {
        height:45px;
        line-height:45px;
        width: 130px;
        float: left;
        margin-right: 20px;
    }
    .subsidy-img {
        height: 140px;
        width: 120px;
        position: absolute;
        right: 8%;
        top: 11%;
    }
    .centerimg {
        text-align: center;
    }
    .pre_img_style {
        height:500px;
        width:auto;
        max-width: 500px;
    }
</style>
<template>
    <Layout>
        <div class="layout">
            <div class="titles">办件信息</div>
            <div v-if="formItem.operation">
                <div class="head_btn" v-if="formItem.next_step">
                    <Button type="primary" style="margin-right:10px" long @click="nextStep(false)">上一步</Button>
                </div>
                <div class="head_btn" v-if="formItem.next_step">
                    <Button type="primary" style="margin-right:10px" long @click="saveOrder">保 存</Button>
                </div>
                <div class="head_btn" v-if="!formItem.next_step">
                    <Button type="primary" style="margin-right:10px" long @click="nextStep(true)">下一步</Button>
                </div>
            </div>
            <div class="head_btn">
                <Button type="error" style="margin-right:10px" long @click="backOrder">返 回</Button>
            </div>
        </div>
        <Content class="content">
            <div class="header" v-show="!formItem.operation || !formItem.next_step">
                <span style="font-size: 20px;color: coral;">01 事项信息</span>
            </div>
            <div class="info" v-show="!formItem.operation || !formItem.next_step">
                <div class="items">
                    <div style="width:40%;float:left">
                        <span>事项名称：</span><span>{{itemData.text}}</span>
                    </div>
                    <div style="width:50%;float:left">
                        <span>事项编码：</span><span>{{itemData.id}}</span>
                    </div>
                </div>
                <div class="items">
                    <div style="width:40%;float:left">
                        <span>联系电话：</span><span>{{itemData.LINK_TEL}}</span>
                    </div>
                    <div style="width:25%;float:left">
                        <span>承诺期限：</span><span>{{itemData.PROMISE_DAY==-1 ? '即办件' : itemData.PROMISE_DAY + '个工作日'}}</span>
                    </div>
                    <div style="width:35%;float:left">
                        <span>办理时间：</span><span>{{itemData.ACCEPT_TIME}}</span>
                    </div>
                </div>
                <div class="items">
                    <div style="width:40%;float:left">
                        <span>所属部门：</span><span>{{itemData.jdjg}}</span>
                    </div>
                    <div style="width:25%;;float:left">
                        <span>是否收费：</span><span>{{itemData.CHARGE_FLAG=='0'?'不收费':'收费'}}</span>
                    </div>
                    <div style="width:35%;;float:left">
                        <span>网上办理：</span><span>{{itemData.is_wsbl=='1'?'可以':'不可以'}}</span>
                    </div>
                </div>
                <div class="items">
                    <div style="width:100%;float:left">
                        <span>受理条件：</span><span>{{itemData.APPLY_CONDITION}}</span>
                    </div>
                </div>
                <div class="items">
                    <div style="width:100%;float:left">
                        <span>补充说明：</span><span>{{itemData.SXSM}}</span>
                    </div>
                </div>
                <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div>
            </div>
            <div class="header" v-show="!formItem.operation || !formItem.next_step">
                <span style="font-size: 20px;color: coral;">02 办件信息</span>
            </div>
            <div class="info-middle" v-show="!formItem.operation || !formItem.next_step">
                <div style="width:50%;float:left">
                    <Form ref="personinfo" :model="personinfo" :label-width="110" style="margin-top:10px">
                        <FormItem label="申请人类型: " >
                            <RadioGroup v-model="formItem.radio">
                                <Radio label="male">个人</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="证件类型: " prop="type">
                            <Input v-model="personinfo.type" disabled="disabled"></Input>
                        </FormItem>
                        <FormItem label="证件编号: " prop="code">
                            <Input v-model="personinfo.cardno" disabled="disabled"></Input>
                        </FormItem>
                        <FormItem label="民族: ">
                            <Input v-model="personinfo.folk" disabled="disabled"> </Input>
                        </FormItem>
                        <FormItem label="地址: ">
                            <Input type="textarea" v-model="personinfo.address" :autosize="{minRows: 2,maxRows: 5}" disabled="disabled"></Input>
                        </FormItem>
                    </Form>
                </div>
                <div style="width:50%;float:left">
                    <Form ref="personinfo" :model="personinfo" :label-width="100" style="margin-top:10px">
                        <FormItem label="申请人: " prop="name">
                            <Input v-model="personinfo.name" disabled="disabled"></Input>
                        </FormItem>
                        <FormItem label="联系电话: ">
                            <Input v-model="personinfo.mobile" disabled="disabled"></Input>
                        </FormItem>
                        <FormItem label="性别: ">
                            <Input v-model="personinfo.sex" disabled="disabled"></Input>
                        </FormItem>
                        <FormItem label="生日: ">
                            <Input v-model="personinfo.birthday" disabled="disabled"> </Input>
                        </FormItem>
                        <FormItem label="政治面貌: ">
                            <Input v-model="personinfo.political_outlook" disabled="disabled"></Input>
                        </FormItem>
                    </Form>
                </div>
            </div>
            <div class="header" v-show="!formItem.operation || formItem.next_step">
                <span style="font-size: 20px;color: coral;">03 申报材料</span>
            </div>
            <div style="height: auto; background-color: #F8F8FF;" v-show="!formItem.operation || formItem.next_step">
                <Table v-if="!formItem.reloadTabel" border :columns="columns7" :data="documentlist"></Table>
            </div>
        </Content>

        <Modal v-model="face_mol" title="拍照" @on-visible-change="modalChange" width="700">
            <face-camera :isPlay="face_shows" :extraData="upPicData" @img-result="imgResult"></face-camera>
            <div slot="footer">
                <Button type="error" @click="face_mol=false">关闭</Button>
            </div>
        </Modal>
        <Modal v-model="gpy_mol" title="高拍仪" @on-visible-change="modalChange2" @on-cancel="closeHeight" @on-ok="closeHeight">
            <height-camera :isOpen="gpy_shows" :extraData="upPicData" @ret-fun="retFun"></height-camera>
        </Modal>
        <Modal v-model="up_pic_mol" title="图片上传" @on-ok="changeToView" :closable="false">
            <Upload multiple action="http://iview.tripln.top/api/ac/csc/auditHadoopUploadFilesService/createUpLoadFiles" :before-upload="beforeUpload">
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
                <span style="margin-left: 250px">请上传小于8M的图片</span>
            </Upload>
            <img :src="temp_photo" style="width: 100%"/>
        </Modal>
        <!-- 图片查看模态框 -->
        <Modal v-model="picPreviewMol.preShow" :closable="false" :styles="{top: '20px'}" width="532">
            <Carousel v-model="picPreviewMol.picIndex" style="width:500px" dots="outside" trigger="hover">
                <CarouselItem class="centerimg" v-for="(imginfo, index) in picPreviewMol.pic_urls" :key="index">
                    <img :src="imginfo" class="pre_img_style" />
                </CarouselItem>
            </Carousel>
            <div slot="footer" style="text-align: center">
                <Button type="info" @click="originalGraph">查看原图</Button>
                <Button type="error" v-if="formItem.operation" @click="deletePic">删除当前照片</Button>
                <Button @click="picPreviewMol.preShow=false">关闭</Button>
            </div>
        </Modal>
        <!--残疾人补贴模态框-->
        <Modal v-model="formItem.subsidyFormShow" :title="formItem.itemInfoFormTitle" width="1000" :closable="false">
            <Form label-position="right" :label-width="100" style="position: relative;">
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">姓名：</Col>
                    <Col span="5" class="ivu-form-item-content">
                        <Input v-model="formItem.itemInfoForm.name" ></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">性别：</Col>
                    <Col span="5" class="ivu-form-item-content">
                        <Input v-model="formItem.itemInfoForm.sex" ></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">年龄：</Col>
                    <Col span="5" class="ivu-form-item-content">
                        <Input v-model="formItem.itemInfoForm.age" ></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">残疾类别：</Col>
                    <Col span="5" class="ivu-form-item-content">
                        <Input v-model="formItem.itemInfoForm.disabled_categories" ></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">等级：</Col>
                    <Col span="5" class="ivu-form-item-content">
                        <Input v-model="formItem.itemInfoForm.level" ></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">社区(村)：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.street" ></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">联系电话：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.phone"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">残疾人证号：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.disable_ID_No" ></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">发证时间：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.issuing_time" ></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">监护人：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.guardian"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">监护人联系电话：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.guardian_phone"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">月工资：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.month_money"></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">户籍地址：</Col>
                    <Col span="13">
                        <Input v-model="formItem.itemInfoForm.address"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">户籍性质：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.hkxz"></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">低保(边缘)户证号：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.low_income_No"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">申请时间：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.apply_date"></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">银行：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.bank_name"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">银行账户名：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.bank_peoplename"></Input>
                    </Col>
                    <Col span="3" class="ivu-form-item-label">银行卡号：</Col>
                    <Col span="5">
                        <Input v-model="formItem.itemInfoForm.bank_cardno"></Input>
                    </Col>
                </Row>
                <Row class="mb20">
                    <Col span="3" class="ivu-form-item-label">补贴对象：</Col>
                    <Col span="2" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000207000'">低保残疾人</Col>
                    <Col span="3" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000207000'">低保边缘残疾人</Col>
                    <Col span="5" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000216000'">重度残疾人</Col>
                    <Col span="3" class="ivu-form-item-label">补贴类型：</Col>
                    <Col span="5" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000207000'">生活补贴</Col>
                    <Col span="5" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000216000'">护理补贴</Col>
                    <Col span="3" class="ivu-form-item-label" v-if="itemData.id == '11210101000000MZJD5212000207000'">生活补贴申请资金：</Col>
                    <Col span="2" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000207000'">¥200</Col>
                    <Col span="3" class="ivu-form-item-label" v-if="itemData.id == '11210101000000MZJD5212000216000'">护理补贴申请资金：</Col>
                    <Col span="2" style="margin-top: 7px" v-if="itemData.id == '11210101000000MZJD5212000216000'">¥100</Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="success" @click="saveInfo(true)">确定</Button>
                <Button type="error" @click="formItem.subsidyFormShow=false">关闭</Button>
            </div>
            <img :src="nophoto" alt="..." class="subsidy-img">
        </Modal>
    </Layout>
</template>
<script>
import FaceCamera from '_c/face2-camera'
import HeightCamera from '_c/height2-camera'
import { userinfo, iteminf, createOrder, updateOrder, createUpLoadFiles } from '@/api/eventlist'
// import { uploadPic } from '@/api/common'
import nophoto from '@/assets/images/nophoto.jpeg'
export default {
  data () {
    return {
      imageType: '',
      fruit: [],
      // 事项详细信息(01 事项信息)
      itemData: {},
      unemploymentItem1: {},
      // 办理人员信息(02 办件信息)/
      personinfo: {},
      // 申报材料列表(03 申报材料)
      documentlist: [],
      // 拍照弹出框控制器
      face_mol: false,
      // 控制打开or关闭拍照功能
      face_shows: false,
      // 高拍仪弹出框控制器
      gpy_mol: false,
      // 控制打开or关闭高拍仪功能
      gpy_shows: false,
      up_pic_mol: false,
      upPicData: {},
      // 图片要件预览临时变量
      temp_photo: '',
      // 图片要件预览弹出框控制器
      picPreviewMol: {
        preShow: false,
        pic_urls: [],
        picIndex: 0
      },
      nophoto,
      // 页面内其他的功能变量
      formItem: {
        // 跳入当前页面时，需要的操作，true添加或编辑 false查看
        operation: '',
        next_step: false,
        a: '低保残疾人',
        b: '生活补贴',
        reloadTabel: false,
        // 在点击申报材料后面按钮时，记录当前要件在列表的索引位置
        paramIndex: 0,
        radio: 'male',
        // 弹出框标题
        itemInfoFormTitle: '',
        communityProveShow: false,
        subsidyFormShow: false,
        deathProveShow: false,
        jobShow: false,
        unemploymentShow: false,
        handlecertificateShow: false,
        recruitShow: false,
        showInsuredRegister: false,
        showInsuredChange: false,
        showInsuredItem: false,
        flexibleregisterShow: false, // 灵活创业就业证
        state: 0,
        checkShow: false,
        // 弹出框内容
        itemInfoForm: {}
      },
      // 残疾人证信息
      disableItem: {
        disableShow: false,
        itemInfoFormTitle: '中华人民共和国残疾人证申请表',
        itemInfo: {}
      },
      // 就业创业登记信息
      handleItem: {
        itemInfoFormTitle: '就业创业登记',
        itemInfo: {}
      },
      // 失业登记信息
      unemploymentItem: {
        itemInfoFormTitle: '失业信息登记',
        itemInfo: {}
      },
      // 灵活就业信息登记
      flexItem: {
        itemInfoFormTitle: '灵活就业信息登记',
        itemInfo: {}
      },
      // 个人求职登记
      jobItem: {
        itemInfoFormTitle: '个人求职登记',
        itemInfo: {}
      },
      checkForm: {
        itemInfoFormTitle: '失业登记年审',
        itemInfo: {}
      },
      recruitItem: {
        itemInfoFormTitle: '空岗信息录入',
        itemInfo: {}
      },
      // 申报材料表头
      columns7: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '材料名称', key: 'name', width: 200 },
        { title: '是否必填', key: 'necessary_name', align: 'center', width: 90 },
        { title: '要件类型', key: 'type_name', align: 'center', width: 100 },
        { title: '是否提交', key: 'is_submit', align: 'center', width: 90 },
        { title: '备注', key: 'remark', width: 260 },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          render: (h, params) => {
            let temp = []
            if (params.row.write_type === 'images') {
              if (this.formItem.operation) {
                temp.push(
                  h('Button', {
                    props: { type: 'primary', size: 'small' },
                    style: { marginRight: '5px' },
                    on: {
                      click: () => {
                        this.gpy_mol = true
                        this.gpy_shows = true
                        this.upPicData.fileName = params.row.name + this.datetime2str(new Date())
                        this.upPicData.filePath = this.personinfo.id + '/' + this.$route.params.code
                        this.formItem.paramIndex = params.index
                      }
                    }
                  }, '高拍仪')
                )
                temp.push(
                  h('Button', {
                    props: { type: 'primary', size: 'small' },
                    style: { marginRight: '5px' },
                    on: {
                      click: () => {
                        this.face_mol = true
                        this.face_shows = true
                        this.upPicData.fileName = params.row.name + this.datetime2str(new Date())
                        this.upPicData.filePath = this.personinfo.id + '/' + this.$route.params.code
                        this.formItem.paramIndex = params.index
                      }
                    }
                  }, '拍照')
                )
                temp.push(
                  h('Button', {
                    props: { type: 'primary', size: 'small' },
                    style: { marginRight: '5px' },
                    on: {
                      click: () => {
                        this.up_pic_mol = true
                        this.upPicData.fileName = params.row.name + this.datetime2str(new Date())
                        this.upPicData.filePath = this.personinfo.id + '/' + this.$route.params.code
                        this.formItem.paramIndex = params.index
                        this.temp_photo = ''
                      }
                    }
                  }, '上传')
                )
              }
              if (params.row.is_submit === '已提交') {
                temp.push(
                  h('Button', {
                    props: { type: 'info', size: 'small' },
                    style: { marginRight: '5px' },
                    on: {
                      click: () => {
                        this.picPreviewMol.pic_urls = params.row.img_urls
                        this.picPreviewMol.preShow = true
                        this.picPreviewMol.picIndex = 0
                        this.formItem.paramIndex = params.index
                      }
                    }
                  }, this.formItem.operation ? '预览' : '查看')
                )
              }
            } else if (params.row.write_type === 'form') {
              temp.push(
                h('Button', {
                  props: { type: 'info', size: 'small' },
                  style: { marginRight: '5px' },
                  on: {
                    click: () => {
                      this.formItem.paramIndex = params.index
                      this.showFormInfo(params.row)
                    }
                  }
                }, this.formItem.operation ? '编辑' : '查看')
              )
            }
            return h('div', temp)
          }
        }
      ]
    }
  },
  components: {
    FaceCamera,
    HeightCamera
  },
  methods: {
    // 灵活就业登记
    save () {
      this.$refs.handlechild.test()
      return true
    },
    // 时间转字符串 年月日时分秒
    datetime2str (date) {
      let time1 = date.getFullYear() + ''
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hh = date.getHours()
      let mm = date.getMinutes()
      let ss = date.getSeconds()
      time1 += month < 10 ? '0' + month : month
      time1 += day < 10 ? '0' + day : day
      time1 += hh < 10 ? '0' + hh : hh
      time1 += mm < 10 ? '0' + mm : mm
      time1 += ss < 10 ? '0' + ss : ss
      return time1
    },
    modalChange (e) {
      this.face_shows = e
    },
    modalChange2 (e) {
      this.openNow = e
    },
    // 页面内提交材料发生变化时刷新表格数据动态
    changeToView () {
      this.formItem.reloadTabel = true
      let temp = this.documentlist[this.formItem.paramIndex]
      if (temp.img_urls || temp.write_type === 'form') {
        temp.is_submit = '已提交'
      }
      this.$nextTick(() => {
        this.formItem.reloadTabel = false
      })
    },
    // 社区证明事项的表单信息校验
    saveJzInfo (flag) {
      if (!this.formItem.itemInfoForm.holder) {
        this.$Notice.error({ title: '请填写持证者', desc: '' })
        return false
      }
      if (!this.formItem.itemInfoForm.xb) {
        this.$Notice.error({ title: '请填写性别', desc: '' })
        return false
      }
      if (!this.formItem.itemInfoForm.holder_code) {
        this.$Notice.error({ title: '请填写证件号码', desc: '' })
        return false
      }
      if (!this.formItem.itemInfoForm.sxzm) {
        this.$Notice.error({ title: '请填写所需证明', desc: '' })
        return false
      }
      if (!this.formItem.itemInfoForm.xzz) {
        this.$Notice.error({ title: '请填写现住址', desc: '' })
        return false
      }
      if (!this.formItem.itemInfoForm.qtqk) {
        this.$Notice.error({ title: '请填写其他情况', desc: '' })
        return false
      }
      if (flag) {
        this.documentlist[this.formItem.paramIndex].formdata = this.formItem.itemInfoForm
      }
      this.formItem.communityProveShow = false
      this.changeToView()
      return true
    },
    saveInfo (flag) {
      if (!this.formItem.itemInfoForm.apply_date) {
        this.$Notice.error({ title: '请填写申请时间', desc: '' })
        return false
      }
      if (flag) {
        this.documentlist[this.formItem.paramIndex].formdata = this.formItem.itemInfoForm
      }
      this.formItem.subsidyFormShow = false
      this.changeToView()
      return true
    },
    // 拍照回调函数
    imgResult (data) {
      if (data.url) {
        this.face_mol = false
        this.face_shows = false
        let list = this.documentlist[this.formItem.paramIndex]
        if (list.img_urls) {
          list.img_urls.push(data.url)
        } else {
          list.img_urls = [data.url]
        }
        this.changeToView()
      } else {
        this.$Notice.error({ title: '拍照失败,请重新拍摄' })
      }
    },
    // 高拍仪保存函数
    retFun (data) {
      if (data.url) {
        this.gpy_mol = false
        this.gpy_shows = false
        let list = this.documentlist[this.formItem.paramIndex]
        if (list.img_urls) {
          list.img_urls.push(data.url)
        } else {
          list.img_urls = [data.url]
        }
        this.changeToView()
      } else {
        this.$Notice.error({ title: '拍照失败,请重新拍摄' })
      }
    },
    // 上传图片前转base64
    beforeUpload (file) {
      console.log(file.type)
      this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        // that.upPicData.list = reader.result.substring(index)
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    // 上传图片
    upPic (obj) {
      createUpLoadFiles(obj).then(res => {
        if (res.data.errcode === 0) {
          let imgurl = JSON.parse(res.data.data.uploadurl).data
          let list = this.documentlist[this.formItem.paramIndex]
          if (list.img_urls) {
            list.img_urls.push(imgurl)
          } else {
            list.img_urls = [imgurl]
          }
          this.temp_photo = imgurl
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    // 全部表单弹出框的入口
    showFormInfo (item) {
      this.formItem[item.form_path] = true
      this.formItem.itemInfoFormTitle = item.name
      if (this.itemData.form_params) { // 编辑
        this.formItem.itemInfoForm = JSON.parse(this.itemData.form_params)
      } else if (item.form_path === 'subsidyFormShow') {
        // 残疾人双残补贴表单
        this.formItem.itemInfoForm.apply_date = this.getTodayDate()
        console.log(this.formItem.itemInfoForm.apply_date, '申请时间')
        this.formItem.itemInfoForm.name = this.personinfo.name || ''
        this.formItem.itemInfoForm.sex = this.personinfo.sex || ''
        this.formItem.itemInfoForm.phone = this.personinfo.mobile
        this.formItem.itemInfoForm.age = this.getAge(this.$route.params.cardno)
        this.formItem.itemInfoForm.address = this.personinfo.present_address || ''
        this.formItem.itemInfoForm.disabled_categories = this.$route.params.disabledPerson
        this.formItem.itemInfoForm.level = this.$route.params.disabledLevel
        this.formItem.itemInfoForm.disable_ID_No = this.$route.params.DISABLED_NUMBER // 残疾人证号
        this.formItem.itemInfoForm.issuing_time = this.$route.params.FIRST_TIME // 发证时间
        this.formItem.itemInfoForm.street = this.$route.params.CJR_ALLOCATION_ID_NAME // 社区
        this.formItem.itemInfoForm.guardian_phone = this.$route.params.GUARD_PHONE // 监护人电话
        this.formItem.itemInfoForm.guardian = this.$route.params.GUARD_NAME // 监护人姓名
        this.formItem.itemInfoForm.bank_name = this.$route.params.bank_name
        this.formItem.itemInfoForm.bank_peoplename = this.$route.params.bank_peoplename
        this.formItem.itemInfoForm.bank_cardno = this.$route.params.bank_cardno
        this.formItem.itemInfoForm.low_income_No = this.$route.params.low_income_No
        if (this.$route.params.RESIDENCE === '1') {
          this.formItem.itemInfoForm.hkxz = '农业户口'
        } else if (this.$route.params.RESIDENCE === '2') {
          this.formItem.itemInfoForm.hkxz = '非农业户口'
        }
      } else {
        if (!this.formItem.itemInfoForm.cardno && this.itemData.form_params) {
          this.formItem.itemInfoForm = JSON.parse(this.itemData.form_params)
          this.formItem.itemInfoForm.cardno = this.$route.params.cardno
        } else {
          this.formItem.itemInfoForm = {}
        }
        this.formItem.state++
      }
    },
    // 身份证号获取用户信息
    getuserinfo (cardno) {
      userinfo(cardno).then(res => {
        if (res.data.data) {
          this.personinfo = res.data.data
          this.personinfo.type = '身份证'
          this.personinfo.sex = this.getInfoByIdCard(cardno, 2)
          this.personinfo.birthday = this.getInfoByIdCard(cardno, 1)
          console.log(this.personinfo.birthday, '生日')
        } else {
          this.$Notice.error({ title: '查不到人员信息' })
        }
      })
    },
    saveOrder () {
      if (!this.formItem.operation) {
        this.$Notice.success({ title: '错误', desc: '非法操作' })
        return
      }
      let paramJson = {}
      let param = {
        item_id: this.$route.params.itemid,
        cardno: this.$route.params.cardno
      }
      let verify = true
      this.documentlist.forEach(element => {
        if (element.write_type === 'images' && element.img_urls) {
          paramJson[element.value] = element.img_urls.toString()
        } else if (element.write_type === 'form') {
          if (element.form_path === 'subsidyFormShow') {
            this.formItem.itemInfoForm.apply_date = this.getTodayDate()
            param.form_params = this.formItem.itemInfoForm
          } else if (element.form_path === 'deathProveShow') {
            verify = this.saveDeathInfo(false)
            param.form_params = this.formItem.itemInfoForm
            param.form_params.jmlx = this.formItem.itemInfoForm.jmlx_a.toString()
          } else if (element.form_path === 'communityProveShow') {
            verify = this.saveJzInfo(false)
            param.form_params = this.formItem.itemInfoForm
          } else if (element.form_path === 'checkShow') {
            verify = this.saveCheck(false)
            param.form_params = this.checkForm.itemInfo
          } else if (element.form_path === 'jobShow') {
            verify = this.saveJobInfo(false)
            param.form_params = this.jobItem.itemInfo
          } else if (element.form_path === 'handlecertificateShow') {
            verify = this.handle(false)
            param.form_params = this.handleItem.itemInfo
          } else if (element.form_path === 'unemploymentShow') {
            verify = this.saveUnemploymentInfo(false)
            param.form_params = this.unemploymentItem.itemInfo
          } else if (element.form_path === 'recruitShow') {
            verify = this.saveRecruit(false)
            param.form_params = this.recruitItem.itemInfo
          } else if (element.form_path === 'flexibleregisterShow') {
            verify = this.save(false)
            param.form_params = this.flexItem.itemInfo
          } else {
            param.form_params = this.formItem.itemInfoForm
          }
        }
      })
      if (!verify) return
      param.params = JSON.stringify(paramJson)
      param.code = this.$route.params.code
      // 入参中 params：要件json，form_params：表单对象
      updateOrder(param).then(res => {
        if (res.data.data) {
          this.$Notice.success({ title: '保存成功', desc: '业务编号：' + param.code })
          this.$router.push({ name: this.$route.params.path || 'workbench', params: this.$route.params.cur_data })
        } else {
          this.$Notice.error({ title: '保存失败', desc: res.data.errmsg })
        }
      })
    },
    // 查看图片原图功能
    originalGraph () {
      window.open(this.picPreviewMol.pic_urls[this.picPreviewMol.picIndex])
    },
    // 删除已经上传的图片
    deletePic () {
      this.picPreviewMol.pic_urls.splice(this.picPreviewMol.picIndex, 1)
      let temp = this.documentlist[this.formItem.paramIndex]
      temp.img_urls = this.picPreviewMol.pic_urls
      if (this.picPreviewMol.picIndex === 0) {
        if (temp.img_urls.length === 0) {
          temp.img_urls = null
          this.picPreviewMol.preShow = false
          this.formItem.reloadTabel = true
          temp.is_submit = '未提交'
          this.$nextTick(() => {
            this.formItem.reloadTabel = false
          })
        }
      } else {
        this.picPreviewMol.picIndex--
      }
    },
    backOrder () {
      this.$router.push({
        name: this.$route.params.path || 'workbench',
        params: this.$route.params.cur_data
      })
    },
    // 上一步（lag=false） || 下一步（flag=true）
    nextStep (flag) {
      if (!this.formItem.operation) {
        this.$Notice.success({ title: '错误', desc: '非法操作' })
        return
      }
      // 下一步按钮，当无订单编号时表示下单，否则是修改要件，operation=0时表示失败订单重新办理
      if (flag && (this.$route.params.operation === '0' || !this.$route.params.code)) {
        let param = {
          item_id: this.$route.params.itemid,
          cardno: this.$route.params.cardno
        }
        createOrder(param).then(res => {
          if (res.data.data) {
            this.$Notice.success({ title: '保存成功', desc: '请上传要件或表单，完善业务信息' })
            this.$route.params.code = res.data.data
            this.formItem.next_step = true
          } else {
            this.$Notice.error({ title: '保存失败', desc: res.data.errmsg })
          }
        })
      } else {
        this.formItem.next_step = flag
      }
    },
    closeHeight () {
      this.gpy_shows = false
    },
    getInfoByIdCard (UUserCard, num) {
      if (num === 1) {
        // 获取出生日期
        let birth = ''
        birth = UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
        return birth
      }
      if (num === 2) {
        // 获取性别
        if (parseInt(UUserCard.substr(16, 1)) % 2 === 1) {
          // 男
          return '男'
        } else {
          // 女
          return '女'
        }
      }
      if (num === 3) {
        // 获取年龄
        var myDate = new Date()
        var month = myDate.getMonth() + 1
        var day = myDate.getDate()
        var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1
        if ((UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) === month) && UUserCard.substring(12, 14) <= day) {
          age++
        }
        return age
      }
    },
    getAge (identityCard) {
      var len = (identityCard + '').length
      if (len === 0) {
        return 0
      } else {
        if ((len !== 15) && (len !== 18)) { // 身份证号码只能为15位或18位其它不合法
          return 0
        }
      }
      var strBirthday = ''
      if (len === 18) { // 处理18位的身份证号码从号码中得到生日和性别代码
        strBirthday = identityCard.substr(6, 4) + '/' + identityCard.substr(10, 2) + '/' + identityCard.substr(12, 2)
      } else if (len === 15) {
        strBirthday = '19' + identityCard.substr(6, 2) + '/' + identityCard.substr(8, 2) + '/' + identityCard.substr(10, 2)
      }
      var birthDate = new Date(strBirthday)
      var nowDateTime = new Date()
      var age = nowDateTime.getFullYear() - birthDate.getFullYear()
      if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() === birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
        age--
      }
      return age
    },
    getTodayDate () {
      var dd = new Date()
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1 // 获取当前月份的日期
      var d = dd.getDate()
      var hour = dd.getHours()
      var minute = dd.getMinutes()
      var second = dd.getSeconds()
      return y + '-' + m + '-' + d + ' ' + hour + ':' + minute + ':' + second
    }
  },
  mounted () {
    console.log(this.$route.params.bank_name, '!!@!!@!@!@!')
    this.formItem.operation = this.$route.params.operation === '1'
    this.formItem.next_step = false
    let param = {
      'cardno': this.$route.params.cardno,
      'id': this.$route.params.itemid,
      'code': this.$route.params.code,
      'params': '1'
    }
    this.getuserinfo(param.cardno)
    iteminf(param).then(res => {
      if (res.data.data) {
        this.itemData = res.data.data
        this.documentlist = res.data.data.documentlist
        this.documentlist.forEach(element => {
          element.necessary_name = element.necessary === '1' ? '必填' : '非必填'
          element.is_submit = '未提交'
          if (element.write_type === 'images') {
            element.type_name = '图片要件'
            if (element.img_url) {
              element.img_urls = element.img_url.split(',')
              element.is_submit = '已提交'
            }
          } else if (element.write_type === 'form') {
            element.type_name = '表单'
            if (element.write_type === 'form' && element.formdata) {
              this.formItem.itemInfoForm = element.formdata
              element.is_submit = '已提交'
            } else if (this.itemData.form_params) {
              element.is_submit = '已提交'
            }
          }
        })
      }
    })
  }
}
</script>
